輕鬆搞懂 Type 與 Interface，並解決常見錯誤

嘿嘿！今天我們要進入 TypeScript 的奇妙世界，看看它的兩位大明星——Type 和 Interface！他們雖然長得有點像，但個性大不相同，適合不同的場景。

就像你在買東西時會選擇不同的商品一樣，在寫程式時也要選擇適合的工具。
本篇文章將帶你用簡單的步驟解開這兩者的奧秘，並順便解決常見的 TypeScript 錯誤。

讓我們一起開始吧！

本文重點

1. TypeScript 中 type 與 interface 的比較：深入了解兩者的差異。
2. 如何運用這些知識解決常見程式錯誤。
3. 何時應該選擇 type，何時應該選擇 interface。

Type vs Interface 的比較

1. 宣告與使用

type 和 interface 在 TypeScript 中都有相同的功能，能定義物件、函數、聯合類型等，但它們在宣告上有一些微妙的差異。

Type:

• 使用 type 可以定義更靈活的類型，尤其是複合類型（像是交集與聯合類型）。
• 支援基礎類型（primitive types）、聯合類型（union types）、元組（tuples）、映射型別（mapped types）等。

type Article = {
  title: string;
  price: number;
  vat: number;
  stock?: number;
  description?: string;
};

Interface:

• interface 更加專注於定義物件的結構，並且可以擴展（extends）其他的 interface。
• 比 type 更加適合物件導向的設計，因為它強調類別的約束性，並支援實現與擴展。

interface ShopItem {
  title: string;
  price: number;
  vat: number;
  stock?: number;
  description?: string;
}

2. 擴展性

Interface 的擴展（Extends）功能：

interface 支援擴展其他 interface，這使得它在大型應用程式或物件導向的場景中非常有用。

interface PhysicalItem extends ShopItem {
  weight: number;
  dimensions: { length: number; width: number; height: number };
}

Type 的合併：

type 則可以通過交集（Intersection Types）來合併多個型別。這讓它可以在靈活處理多種型別時非常有用。

type DigitalItem = Article & { downloadUrl: string };

3. 可選屬性與預設值

無論是 type 還是 interface，它們都支援可選屬性 (?)，使得型別宣告更加靈活：

interface ShopItem {
  title: string;
  price: number;
  vat: number;
  stock?: number; // Optional
  description?: string;
}

常見的 TypeScript 錯誤解析

在使用 TypeScript 時，我們有時候會遇到一些編譯錯誤。例如，當你將一個 interface 實現到類別中時，某些必要屬性可能沒有正確實現，這會導致編譯錯誤。

讓我們看看一個簡單的錯誤：

class DVD implements ShopItem {
  title: string;
  price: number;
  vat: number;

  constructor(title: string) {
    this.title = title;
    this.price = 9.99;
    this.vat = 0.2;
  }
}

這段程式碼中，ShopItem 的 stock 屬性是可選的（?），因此在實現 ShopItem 時，我們不需要為每個物件都提供 stock 值。然而，如果 stock 是必選項（沒有 ?），那麼我們在類別中就必須實現這個屬性，否則會出現錯誤。

演練區
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

總結小語：何時用 type？何時用 interface？

• 如果你需要更靈活的類型定義，例如聯合類型、交集類型，或者操作基礎類型，那麼選擇 type。
• 如果你正在開發大型應用程式，並且經常需要擴展物件類型，那麼 interface 是更好的選擇。

1. 物件導向、類別實現：選擇 interface。
2. 複雜型別、聯合與交集類型：選擇 type。

希望這篇文章讓你更清楚地理解 type 和 interface，並幫助你解決常見的 TypeScript 錯誤。
記住，這兩者都是強大的工具，選擇適合的工具能讓你的程式碼更加精簡且易於維護！

快去實踐吧！ ദ്ദി ˉ͈̀꒳ˉ͈́ )✧